<template>
  <!-- 项目编辑对话框 -->
  <el-dialog
    :title="$t('taskDialog.title.editor')"
    :visible.sync="taskEditorDialogVisible"
    top="70px"
    width="50%"
    @open="open()"
    :before-close="closeDialogCan"
  >
    <span class="main">
      <el-form label-position="right" label-width="80px">
        <el-form-item :label="$t('taskDialog.table.name')">
          <el-input v-model="taskEditorRow.name"></el-input>
        </el-form-item>
        <el-form-item :label="$t('taskDialog.table.descript')">
          <el-input v-model="taskEditorRow.description"></el-input>
        </el-form-item>
        <el-form-item :label="$t('taskDialog.table.proName')">
          <el-select
            v-model="taskEditorRow.project_id"
            :placeholder="$t('taskDialog.table.select')"
            @change="selectChange"
          >
            <el-option
              v-for="item in projectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.ip
              }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('taskDialog.table.reptile')">
          <el-select
            v-model="taskEditorRow.spider"
            :placeholder="$t('taskDialog.table.select')"
            collapse-tags
            multiple
            @change="handler"
          >
            <el-option
              v-for="item in proReptileList"
              :key="item.id"
              :label="item.en_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialogCan">{{
        $t("taskDialog.btn.cancel")
      }}</el-button>
      <el-button type="primary" @click="saveTaskEditor()">{{
        $t("taskDialog.btn.save")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: [
    "taskEditorDialogVisible",
    "taskEditorRow",
    "taskList",
    "projectList",
    "hostList",
    "reptileList",
  ],
  data() {
    return {
      value: [1, 3],
      editorData: "",
      params: {},
      // 项目下的爬虫列表
      proReptileList: [],
    };
  },
  methods: {
    handler(val) {
      console.log(val);
    },
    open() {
      console.log(this.taskEditorRow);
      this.projectList.forEach((val) => {
        val.ip = this.hostList.find((vals) => {
          return vals.id == val.client_id;
        }).ip;
      });
      console.log(this.projectList);
      this.proReptileList = this.reptileList.filter((vals) => {
        return vals.project_id == this.taskEditorRow.project_id;
      });
      console.log(this.reptileList);
      console.log(this.proReptileList);
    },
    // 项目发生变化时
    selectChange(val) {
      console.log(val);
      this.taskEditorRow.spider = [];
      let res = this.projectList.find((ele) => {
        return ele.id == val;
      });
      console.log(res);
      this.taskEditorRow.clients_id = res.client_id;
      this.taskEditorRow.type = res.type;
      // 项目发生变化时 才能显示该项目下的爬虫
      console.log(this.reptileList);
      this.proReptileList = this.reptileList.filter((vals) => {
        return vals.project_id == val;
      });
    },
    // 保存按钮
    async saveTaskEditor() {
      console.log(this.taskEditorRow);
      let params = {};
      if (this.taskEditorRow.clients_id) {
        params.clients = this.taskEditorRow.clients_id;
      }
      params.description = this.taskEditorRow.description;
      params.name = this.taskEditorRow.name;
      params.type = this.taskEditorRow.type;
      params.project_id = this.taskEditorRow.project_id;
      params.spider = this.taskEditorRow.spider;
      params.id = this.taskEditorRow.id;
      console.log("编辑任务时传递的参数", params);
      const { data: res } = await this.$http.get("/check/task/name", {
        params: {
          name: this.taskEditorRow.name,
          project_id: this.taskEditorRow.project_id,
          type: 1,
        },
      });
      if (res.code == 0) {
        this.$http.post("/task/edit", params).then((res) => {
          console.log(res);
          if (res.data.code == 0) {
            this.$message.success(this.$t("taskDialog.message.editSuccess"));
            this.closeDialog();
          } else if (res.data.code == 1) {
            this.$message.error(this.$t("taskDialog.message.editError"));
          }
        });
      } else if (res.code == 1) {
        this.$message.info(this.$t("taskDialog.message.have"));
      }
    },
    // 关闭弹出框
    closeDialog() {
      this.$emit("closeDialog");
    },
    closeDialogCan() {
      this.$emit("closeDialog", "1");
    },
  },
};
</script>

<style lang='less' scoped>
</style>